import React, { useState } from 'react';
import { Card, Tag, Avatar } from 'antd';
import { EyeOutlined, StarOutlined, StarFilled, LikeOutlined, LikeFilled } from '@ant-design/icons';
import '@/styles/AppCard.scss';
import logo from '@/assets/3.jpg';
import axios from 'axios';

interface AppCardProps {
  app: {
    flowId: string;
    flowName: string;
    userName: string;
    description: string;
    downloadCount: number;
    likeCount: number;
    likedByUser: boolean;
    tags: { tagId: string; tagName: string }[];
  };
}

const AppCard: React.FC<AppCardProps> = ({ app }) => {
  const [likedByUser, setLikedByUser] = useState(app.likedByUser);
  const [likeCount, setLikeCount] = useState(app.likeCount);
  const [collected, setCollected] = useState(false);

  const handleLike = () => {
    axios.post('http://localhost:8080/store/like', {
      userId: '2e56ea15-5853-46a7-a5f5-f0346d28a2a9', // 替换为实际的userId
      flowId: app.flowId
    })
    .then(response => {
      console.log(response.data);
      if (response.data.code === 1) {
        setLikedByUser(response.data.data.likedByUser);
        setLikeCount(response.data.data.likeCount);
      } else {
        console.error('Error liking the post:', response.data.message);
      }
    })
    .catch(error => {
      console.error('Error liking the post:', error);
    });
  };

  return (
    <Card className="app-card" style={{ width: '31.25rem', height: '17.5rem', marginBottom: '0.25rem' }}>
      <div className="app-card-header">
        <Avatar shape="square" size={64} src={logo} alt="app logo" />
        <div className="app-card-header-content">
          <h2>{app.flowName}</h2>
          <div>
            {app.tags.map(tag => (
              <Tag key={tag.tagId} style={{ fontSize: '1rem', padding: '0.25rem 0.25rem', backgroundColor: 'white',marginTop:'0.3125rem',marginRight:'8px' }}>{tag.tagName}</Tag>
            ))}
          </div>
        </div>
      </div>
      <p style={{ color: '#81838f',height:'58px',fontSize: '1.125rem', maxWidth: '500px', display: '-webkit-box', WebkitBoxOrient: 'vertical', WebkitLineClamp: 2, overflow: 'hidden', textOverflow: 'ellipsis' }}>
        {app.description}
      </p>
      <p style={{ color: '#81838f', fontSize: '1rem' }}>发布人：{app.userName}</p>
      <div className="app-card-footer">
        <div className="app-card-stats">
          <span onClick={handleLike} style={{ display: 'inline-flex', alignItems: 'center', marginRight: '1.875rem', color: '#81838f', fontSize: '1.125rem' }}>
            {likedByUser ? <LikeFilled style={{ color: 'red', fontSize: '1.125rem', marginRight: '0.125rem' }} /> : <LikeOutlined style={{ fontSize: '1.125rem', marginRight: '0.125rem' }} />} {likeCount}
          </span>
          <span onClick={() => setCollected(!collected)} style={{ display: 'inline-flex', alignItems: 'center', marginRight: '1.875rem', color: '#81838f', fontSize: '1.125rem' }}>
            {collected ? <StarFilled style={{ color: 'gold', fontSize: '1.125rem', marginRight: '0.125rem' }} /> : <StarOutlined style={{ fontSize: '1.125rem', marginRight: '0.125rem' }} />} 100
          </span>
          <span style={{ display: 'inline-flex', alignItems: 'center', color: '#81838f', fontSize: '1.125rem' }}>
            <EyeOutlined style={{ fontSize: '1.125rem', marginRight: '0.125rem' }} /> {app.downloadCount}
          </span>
        </div>
        <button className="start-talking-button" style={{ fontSize: '1.125rem', marginLeft:'2.5rem'}}>复制应用</button>
        <button className="start-talking-button" style={{ fontSize: '1.125rem' }}>开始对话</button>
      </div>
    </Card>
  );
};

export default AppCard;
